    <template>
      <div class="sidebar-wrapper">
        <HeaderVue style="width: 100%" ></HeaderVue>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router 
      >
      <el-menu-item  index="/" >
         
            <el-icon><location /></el-icon>
            <span>首页</span>
        
       </el-menu-item>
       <el-sub-menu index="2" >
        <template #title>
          <el-icon><icon-menu /></el-icon>
          <span>爬虫中心</span>
        </template>
          <el-menu-item-group >
            <el-menu-item index="/xhsDetail">小红书</el-menu-item>
            <el-menu-item index="2-2">东方财富股吧</el-menu-item>
            <el-menu-item index="2-3">boss直聘</el-menu-item>
          </el-menu-item-group>
      </el-sub-menu>
        <el-menu-item index="/taskHub">
          <el-icon><location /></el-icon>
          <span>任务中心</span>
        </el-menu-item>
        <el-menu-item index="/aboutDeveloper">
          <el-icon><setting /></el-icon>
          <span>开发者介绍</span>
          </el-menu-item>
      </el-menu>
    </div>
    </template>
    
    <script setup>
  import HeaderVue from '../Header/HeaderVue.vue';
    </script>
    
    <style scoped> 
    .sidebar-wrapper{
      width: 200px;
      height: 100vh;
      background-color: #f0f0f0;
    }
  
    .router-link{
      text-decoration: none;
      color: black;
    }
    </style>